<template>
	<scroll-view scroll-y="true" class="container999" @scroll="scrollTop">
		<navTopIndexTT title="追剧" :scrollTopNum="scrollTopNum"></navTopIndexTT>
		<view class="topBox">
			<view class="content-position"></view>
			<view class="bg-box" :style="{
				top: `calc(-${statusBarHeight}px - 94rpx)`
			}"></view>
			<view class="content-box" v-if="signListView && signListView.length">
				<view class="top-box">
					<view>已连续签到<text class="num-view">{{ continuousSignInDays }}</text>天</view>
					<!-- <view class="right-box">
						签到提醒 <switch class="switch-box" color="#FF6FA2" checked />
					</view> -->
				</view>
				<view class="text-box">签到领看币，新剧抢先看。连续签到7天领惊喜礼包。</view>
				<view class="watch-sign-box">
					<!-- 进度条 -->
					<view class="process-box"></view>
					<view class="process-box-back" :style="{
						width: lineIndex === 1 ? '40rpx' : lineIndex > 0 ? `${(lineIndex - 1) * 92 + 40}rpx` : '0'
					}"></view>
					<view v-for="(item, index) in signListView" :key="index" class="line-box" :class="item.isSignIn ? 'active' : ''"
						@tap="signStatusChange('click')">
						<image v-if="item.isSignIn"
							src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sign_success.png"
							mode="widthFix"></image>
						<template v-if="!item.isSignIn && index === 6">
							<!-- <view class="white-space"></view> -->
							<!-- class="top-img" -->
							<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sign_after1.png"
								mode="widthFix"></image>
						</template>
						<image v-if="!item.isSignIn && index < 6"
							src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/success.png"
							mode="widthFix"></image>

						<text class="mark-article" :class="item.isSignIn ? 'active' : ''"></text>
						<text class="margin-top-set">
							<!-- {{ item.extraReward ? ((item.extraReward + item.stepReward) / 10).toFixed(0) :  (item.stepReward / 10).toFixed(0) }} -->
							{{ item.extraReward ? (item.extraReward + item.stepReward).toFixed(0) : (item.stepReward).toFixed(0) }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view @tap="handleAddMess">订阅</view> -->
		<view>
			<view class="block-box">
				<view class="title">
					<view>在追热剧</view>
					<view  v-if="dyDiverInfo && dyDiverInfo.groupId" style="position: relative;" class="qunBox">
						<button @click="clearInfo" :data-is-half-page="true" open-type="joinGroup" class="joinBtn" :group-id="dyDiverInfo.groupId"></button>
						<image style="width: 205rpx;height: 62rpx;position: relative;z-index: 9;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/jinqun/icon_watchTitle.png"></image>
					</view>
					<!-- <text v-if="realList.length > 3" class="more-icon" @tap="handleJumpMore('moreHot')">更多></text> -->
				</view>
				<view class="content-list">
					<view class="item-box" v-for="(item, index) in nowWatchList" @tap="toDetail(item)" :key="index">
						<view class="img-box">
							<image lazy-load :src="item.coverImgUrl"></image>
						</view>
						<view class="title-box">{{ item.title }}</view>
						<!-- <view class="text-one">追到第{{ (item.alreadyWatchSequence + 1)  || 1 }}集</view> -->
					</view>

					<view class="item-box" v-if="nowWatchList.length < 4 && viewGoView">
						<view class="img-box-set flex flex-direction align-center justify-center" @tap="handleJumpIndex">
							<image lazy-load
								src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/more_icon.png"></image>
							<text class="text-gray margin-top-xs text-xs">{{ nowWatchList.length > 0 ? '追的剧太少了' : '你还没有追剧' }}</text>
							<text class="lg text-gray cuIcon-roundadd btn-set"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="block-box margin-bottom-lg">
				<view class="title">
					<text>{{ historyTitle || '猜你会追' }}</text>
					<text v-if="historyList.length > 5" class="more-icon" @tap="handleJumpMore('moreLove')">更多></text>
				</view>
				<view class="content-list style-two justify-between">
					<view class="item-box2" :class="((index + 1) % 3) === 0 ? 'no-right' : ''" v-for="(item, index) in historyList"
						@tap="toDetail(item)" :key="index">
						<view class="img-box">
							<image lazy-load :src="item.contentInfo.coverImgUrl"></image>
						</view>
						<view class="title-box">{{ item.contentInfo.title }}</view>
						<view class="text-one">更新至第{{ item.contentInfo.updateOfEpisodes }}集</view>
					</view>
				</view>
			</view>

		</view>
		<view style="height: 68rpx;"></view>

		<!-- 签到 -->
		<zwyPopupAll :showClose="false" :maskCanClose="false" ref="zwyPopupSign">
			<view class="content-view flex flex-direction align-center">
				<image @tap.stop="handleAddMess" class="close-btn"
					src="https://res.qiguoread.com/staticResources/fellow_townsman/image/zwyPopupClose.png"></image>
				<text class="text-xl text-bold text-black top-set">签到成功</text>
				<!-- 开启订阅消息， -->
				<text class="mark-box-set margin-top-sm text-sm text-gray text-center">签到奖励已到账，连续签到7天\n 领惊喜礼品</text>
				<view class="flex align-center margin-top-sets">
					<image class="img-box-one"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/ks_sign_one.png"></image>
					<text class="text-xl text-black">
						<!-- {{ moneyName }} + {{ ((nowItem.stepReward + nowItem.extraReward) / 10).toFixed(0) }}  -->
						{{ moneyName }} + {{ (nowItem.stepReward + nowItem.extraReward).toFixed(0) }}
					</text>
				</view>
				<button class="btn-set" @tap="handleAddMess">签到提醒</button>
			</view>
		</zwyPopupAll>
		
		<view v-if="fixedQunShow && dyDiverInfo && dyDiverInfo.groupId" class="chatBox">
			<view class="isContent">
				<button @click="clearInfo" :data-is-half-page="true" open-type="joinGroup" class="joinBtn" :group-id="dyDiverInfo.groupId"></button>
				<image style="width: 670rpx;height: 130rpx;position: relative;z-index:9;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/jinqun/icon_watchBottom.png"></image>
			</view>
			<image @click.stop="qunClose" class="qunCloseImg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/jinqun/icon_watchBottomClose.png"></image>
		</view>
	</scroll-view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			fixedQunShow:true,
			moneyName: this.moneyName,
			swiperList: [], // 推荐弹窗的列表
			statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'] || 20,
			listLength: 0,
			noMore: 0,
			historyList: [],
			realList: [], // 在追热剧长度
			nowWatchList: [],
			viewGoView: false, // 展示追剧更多
			recommendObj: {},
			pageNum: 1,
			pageSize: 6,
			dotStyle: false,
			towerStart: 0,
			direction: '',
			intervalObj: null,
			nowVideoObj: {},
			signListView: [],
			continuousSignInDays: 0, // 连续签到天数
			scrollTopNum: 0,
			historyTitle: '',
			dyDiverInfo:'',
			nowItem: {
				stepReward: 0,
				extraReward: 0
			}, // 当前签到
			templateIds: [] // 订阅消息模板ID 1:海洋短剧  2: 剧多多 3:果果剧场
		};
	},
	computed: {
		lineIndex() {
			let indexNum = 0
			this.signListView.forEach((item, index) => {
				if (item.isSignIn) {
					indexNum = (index + 1)
				}
			})
			return indexNum
		}
	},
	created() {
		let config = uni.getStorageSync('ttConfigMess')
		this.templateIds = config && config.templateIds ? config.templateIds : [];
	},
	beforeDestroy() {
		clearInterval(this.intervalObj)
	},
	methods: {
		clearInfo(){
			getApp().globalData.dyDiverInfo9 = '';
			this.$statis({
				action: 'CLICK',
				position: 'DY_DIVERSION_DY_GROUP/DY_CHASING_DRAMA_COMPONENT',
				taskId:this.dyDiverInfo.id
			})
		},
		async getDyDiversionDaoliu(num, diversionTarget) {
			// 第一个参数是导流场景：1支付前，2支付后，3首页，4播放页按钮，第二个参数是导流目标，1是加关，2是加群
			// if(getApp().globalData.dyDiverInfo9){
			// 	getApp().globalData.dyDiverInfo9 = res[0];
			// 	this.dyDiverInfo = getApp().globalData.dyDiverInfo9;
			// 	return;
			// }
			let res = await this.zwyRequest({
				method: 'get',
				url: `/douYin/diversion?diversionScene=${num}&diversionTarget=${diversionTarget}`
			})
			console.log('getDyDiversionDaoliu',res);
			if (res && res[0]) {
				getApp().globalData.dyDiverInfo9 = res[0];
				this.dyDiverInfo = res[0];
				
				this.$statis({
					action: 'EXPOSURE',
					position: 'DY_DIVERSION_DY_GROUP/DY_CHASING_DRAMA_COMPONENT',
					taskId:this.dyDiverInfo.id
				})
				
			}else{
				this.dyDiverInfo = '';
				getApp().globalData.dyDiverInfo9 = '';
			}
		},
		qunClose(){
			this.fixedQunShow = false;
		},
		async reset() {
			uni.showLoading({
				title: ''
			})
			await this.getNowWatchList()
			await this.getIndexConfig()
			await this.getSignActiveStatus();
			this.getDyDiversionDaoliu(9,2);
			uni.hideLoading()
		},
		scrollTop(e) {
			this.scrollTopNum = e.detail.scrollTop
		},
		handleJumpIndex() {
			uni.reLaunch({
				url: '/pages/fx_xjc/fx_xjc'
			})
		},
		// 签到
		handleSign() {
			this.$refs.zwyPopupSign.show('mid')
			this.$uma && this.$uma.trackEvent('Ume_signClick', {
				name: 'Ume_sign_page'
			})
		},
		// 去追剧
		handleViewVideo() {
			let itemObj = this.swiperList.find(item => item.mLeft === 0)
			console.log('itemObj', itemObj)
			itemObj && this.handleJumpDetail(itemObj.contentInfo)
		},
		handleJumpDetail(item) {
			this.direction = ''
			if (!item.fakeId) return
			this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
		},
		// 初始化towerSwiper
		TowerSwiper(name) {
			let list = this[name];
			for (let i = 0; i < list.length; i++) {
				list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
				list[i].mLeft = i - parseInt(list.length / 2)
			}
			this.swiperList = list
			this.nowVideoObj = this.swiperList.find(item => item.mLeft === 0)
		},
		// towerSwiper触摸开始
		TowerStart(e) {
			this.towerStart = e.touches[0].pageX
		},
		// towerSwiper计算方向
		TowerMove(e) {
			this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
		},
		// towerSwiper计算滚动
		TowerEnd() {
			let direction = this.direction;
			let list = this.swiperList;
			if (direction == 'right') {
				let mLeft = list[0].mLeft;
				let zIndex = list[0].zIndex;
				for (let i = 1; i < this.swiperList.length; i++) {
					this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
					this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
				}
				this.swiperList[list.length - 1].mLeft = mLeft;
				this.swiperList[list.length - 1].zIndex = zIndex;
			} else {

				let mLeft = list[list.length - 1].mLeft;
				let zIndex = list[list.length - 1].zIndex;
				for (let i = this.swiperList.length - 1; i > 0; i--) {
					this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
					this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
				}
				this.swiperList[0].mLeft = mLeft;
				this.swiperList[0].zIndex = zIndex;
			}
			this.direction = ""

			this.nowVideoObj = this.swiperList.find(item => item.mLeft === 0)
			// console.log(this.nowVideoObj)
			this.swiperList = this.swiperList
		},
		handleClose(type) {
			this.$refs.zwyPopupSign.close()

			if (type === 'jump') {
				this.handleJumpIndex()
			}
		},
		// 订阅权限弹窗
		async handleAddMess() {
			try {
				let res = await uni.requestSubscribeMessage({
					tmplIds: this.templateIds || []
				})


				console.log('res=====', res)
				if ((res[0] || {}).errCode === 10001027 || (res[0] || {}).errMsg === 'requestSubscribeMessage:fail') {
					uni.showToast({
						title: `请去设置开启订阅消息`,
						icon: 'none'
					})

					// 弹窗拉取失败
					this.$uma && this.$uma.trackEvent('Ume_Subscribe', {
						name: 'Ume_Subscribe_sign_in_fail'
					})
				}

				let template = []
				let temResult = res[1] || {}

				if (temResult[this.templateIds[0]] === 'accept') {
					// 弹窗拉取允许
					this.$uma && this.$uma.trackEvent('Ume_Subscribe', {
						name: 'Ume_Subscribe_sign_in_agree'
					})
				} else if (temResult[this.templateIds[0]] === 'reject') {
					// 弹窗拉取拒绝
					this.$uma && this.$uma.trackEvent('Ume_Subscribe', {
						name: 'Ume_Subscribe_sign_in_disagree'
					})
				}


				// 添加订阅模板
				if (
					temResult[this.templateIds[0]] === 'accept' ||
					temResult[this.templateIds[1]] === 'accept' ||
					temResult[this.templateIds[2]] === 'accept'
				) {
					if (temResult[this.templateIds[0]] === 'accept') { // 签到类型
						template.push({
							templateId: this.templateIds[0],
							templateType: 3
						})
					}

					if (temResult[this.templateIds[1]] === 'accept') { // 剧集更新类型
						template.push({
							templateId: this.templateIds[1],
							templateType: 1
						})
					}

					if (temResult[this.templateIds[2]] === 'accept') { // 热播新剧提醒类型
						template.push({
							templateId: this.templateIds[2],
							templateType: 2
						})
					}
					this.addDingMess(template)
				}

				this.$refs.zwyPopupSign && this.$refs.zwyPopupSign.close()
			} catch (error) {
				console.log(error)
			}
		},
		// 打开设置
		openSetting() {
			uni.openSetting({
				success(res) {
					console.log('res====', res)
				}
			}
			)
		},
		handleJumpMore(type) {
			uni.navigateTo({
				url: `../mayLike/mayLikeTwoTT?type=${type}`
			})
		},
		toDetail(item) {
			console.log(item)
			if (!item.fakeId && !item.contentInfo.fakeId) return
			this.zwyRouter(`../video/video?fakeId=${item.fakeId || (item.contentInfo || {}).fakeId}&compilationId=${item.compilationId || (item.contentInfo || {}).compilationId}`);
		},
		addInterVal() {
			clearInterval(this.intervalObj)
			this.intervalObj = setInterval(() => {
				this.direction = 'left'
				this.TowerEnd()
			}, 5000)
		},
		// 获取在追列表
		async getNowWatchList() {
			try {
				let res = await this.zwyRequest({
					url: '/cdp/user_subscribe/compilations'
				})
				this.realList = res
				this.viewGoView = true
				this.nowWatchList = (res || [])
			} catch (error) {
				console.log(error)
			}
		},
		// 获取猜你会追
		async getList(type) {
			if (type == 'refresh') {
				this.noMore = 2;
				this.pageNum = 1;
			} else {
				this.noMore = 2;
			}
			this.zwyRequest({
				url: `/cdp/index/compilations/related`
			}).then(res => {
				if (res) {
					let tempList;
					if (type == 'refresh') {
						tempList = res.slice(0, 6);
					} else {
						tempList = this.historyList.concat(res);
					}
					let tempMore = 0;
					this.pageNum++;
					if (res.length == 0) {
						tempMore = 1;
					}
					this.historyList = tempList;
					this.noMore = tempMore;
					this.listLength = tempList.length;
				}
			});
		},
		// 获取首页配置
		async getIndexConfig() {
			try {
				let res = await this.zwyRequest({
					url: '/cdp/section_group',
					method: 'GET',
					data: {
						sectionGroupTypeValue: 4
					}
				})
				this.recommendObj = (res.find(item => item.styleType === 'STYLE_17') || {})
				this.historyTitle = this.recommendObj.name
				this.historyList = this.recommendObj.contents ? this.recommendObj.contents.slice(0, 6) : []
				// this.recommendObj = (res.find(item=> item.styleType === 'STYLE_15') || {})
				// this.swiperList = this.recommendObj.contents ? this.recommendObj.contents.slice(0, 3) : []
				// // 初始化轮播配置
				// this.TowerSwiper('swiperList')

				// // 本地存储防止2次弹起
				// let status = this.$store.state.viewPopupIndex

				// console.log('status', status)
				// if(!status && this.swiperList.length) {
				// 	setTimeout(() => {
				// 		this.$refs.zwyPopupAll.show('mid')
				// 		this.addInterVal()
				// 		this.$store.state.viewPopupIndex = true
				// 	}, 100)
				// }

				// this.$forceUpdate();
			} catch (error) {
				console.log(error)
			}
		},
		// 获取签到活动状态
		async getSignActiveStatus(type) {
			try {
				let res = await this.zwyRequest({
					url: '/welfare/sign_in',
					method: 'GET'
				})
				let {
					latestRewards,
					continuousSignInDays
				} = res || {}

				console.log('res====', res)
				this.signListView = latestRewards || []
				this.continuousSignInDays = continuousSignInDays || 0

				// 自动签到
				let nowDay = latestRewards && latestRewards.find(item => item.isToday)
				if (nowDay && !nowDay.isSignIn) {
					this.signStatusChange()
				}

				if (type === 'viewSign') {
					this.nowItem = this.signListView && this.signListView.find(item => item.isToday)
					this.handleSign()
				}
			} catch (error) {
				console.log(error)
			}
		},
		// 签到
		async signStatusChange(type) {
			try {
				if (type === 'click') {
					uni.showToast({
						title: `今天已签到`,
						icon: 'none'
					})
					return
				}
				let res = await this.zwyRequest({
					url: '/welfare/sign_in',
					method: 'PUT'
				})

				if (res) {
					this.getSignActiveStatus('viewSign')
				}

			} catch (error) {
				console.log(error)
			}
		},
		// 订阅上报
		async addDingMess(template) {
			try {
				let res = await this.zwyRequest({
					url: '/mp-api/user_one_time_subscribe/batch',
					method: 'POST',
					data: {
						sourceType: 3,
						sourceId: 0,
						sourceDesc: '',
						templates: template
					}
				})
				console.log('dasdddddd=====', res)
			} catch (error) {
				console.log(error)
			}
		}
	},
	onShareAppMessage: function () {
		var shareJson = {
			path: '/pages/fx_xjc/fx_xjc',
			data: {
				page: 'hj_history',
				sharePosition: '/pages/fx_xjc/fx_xjc',
				'from': '/position/share/share',
				sharePage: '/pages/fx_xjc/fx_xjc',
			}
		}
		// 达人分享批次
		console.log(getApp().globalData.shareBatchId)
		if (getApp().globalData.shareBatchId) {
			shareJson.channel = 'video'
			shareJson.extra = {
				hashtag_list: ['精彩短剧热播中👈']
			}
		}
		shareJson.title = '精彩短剧热播中👈';
		return this.formatShare(shareJson)
	}
};
</script>

<style lang="scss" scoped>
	.chatBox{
		.qunCloseImg{
			width:30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
			z-index: 10;
			top:-40rpx;
		}
		.isContent{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		position: fixed;
		z-index:10;
		bottom: 30rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
	.joinBtn{
		opacity: 0;
		z-index:10;
		position: absolute;
		width: 100%;
		height: 100%;
	}
.container999 {
	background: rgba(253, 253, 253, 1);
	height: 100vh;
	margin-bottom: 40rpx;
}

.content-view {
	background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sign_bg.png') no-repeat center center;
	background-size: 100% 100%;
	width: 550rpx;
	height: 659rpx;
	border-radius: 33rpx;
	position: relative;

	.btn-set {
		width: 386rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 80rpx;
		margin: 74rpx 0 45rpx;
		background: linear-gradient(340deg, #D283FF 0%, #7BB1FD 100%);
		border: none;

		&::after {
			border: none;
		}
	}

	.top-set {
		margin-top: 165rpx;
	}

	.mark-box-set {
		width: 360rpx;
	}

	.img-box-one {
		width: 121rpx;
		height: 121rpx;
		margin-left: -25rpx;
	}

	.img-box-two {
		width: 386rpx;
	}

	.close-btn {
		position: absolute;
		right: 36rpx;
		top: 104rpx;
		width: 28rpx;
		height: 28rpx;
	}
}

.block-box {
	display: flex;
	flex-direction: column;
	width: 710rpx;
	padding: 31rpx;
	border-radius: 30rpx;
	margin: 0 auto 30rpx;
	background: #ffffff;
	box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.09);

	.title {
		margin-left: 5rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		line-height: 50rpx;
		font-weight: 600;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.more-icon {
			font-weight: normal;
			font-size: 26rpx;
			line-height: 37rpx;
			color: #999999;
			margin-right: 13rpx;
		}
	}

	.content-list {
		display: flex;
		overflow: auto;

		&.style-two {
			flex-wrap: wrap;

			.no-right {
				margin-right: 0;
			}

			.item-box {
				margin-bottom: 21rpx;
			}
		}

		.item-box {
			display: flex;
			flex-direction: column;
			margin-right: 14rpx;

			.img-box-set {
				width: 165rpx;
				height: 265rpx;
				background: #F5F7FB;
				border-radius: 8rpx;

				image {
					display: table-cell;
					width: 70rpx;
					height: 70rpx;
				}

				.btn-set {
					font-size: 42rpx;
					margin-top: 12rpx;
				}
			}

			.img-box {
				width: 165rpx;
				height: 265rpx;
				border-radius: 13rpx;
				overflow: hidden;

				image {
					display: table-cell;
					width: 165rpx;
					height: 265rpx;
				}
			}

			.title-box {
				width: 100%;
				color: #333333;
				font-size: 28rpx;
				line-height: 42rpx;
				margin: 11rpx 0 3rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 165rpx;
				text-align: center;
			}
		}


		.item-box2 {
			display: flex;
			flex-direction: column;
			margin-bottom: 12rpx;

			.img-box-set {
				width: 203rpx;
				height: 327rpx;
				background: #F5F7FB;
				border-radius: 8rpx;

				image {
					display: table-cell;
					width: 70rpx;
					height: 70rpx;
				}

				.btn-set {
					font-size: 44rpx;
					margin-top: 16rpx;
				}
			}

			.img-box {
				width: 203rpx;
				height: 327rpx;
				border-radius: 13rpx;
				overflow: hidden;

				image {
					display: table-cell;
					width: 203rpx;
					height: 327rpx;
				}
			}

			.title-box {
				width: 100%;
				color: #333333;
				font-size: 30rpx;
				line-height: 42rpx;
				margin: 11rpx 0 3rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 203rpx;
			}
		}
	}
}

page {
	background-color: white !important;
	border-top: 1rpx solid #f6f6f6;
}

.topBox {
	position: relative;

	.content-position {
		height: 402rpx;
	}

	.bg-box {
		width: 100vw;
		height: 528rpx;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/center_bg.png') no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.content-box {
		margin: auto;
		width: 700rpx;
		min-height: 293rpx;
		background: #fff;
		z-index: 994;
		border-radius: 30rpx;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.09);
		position: absolute;
		left: 50%;
		top: 43rpx;
		transform: translateX(-50%);
		padding: 16rpx 0 32rpx;
	}
}

.content-box {
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		line-height: 50rpx;
		padding: 10rpx 0 2rpx 32rpx;
		font-weight: 600;
		color: #333333;

		.num-view {
			color: #017AFF;
			font-size: 60rpx;
			line-height: 70rpx;
			margin: 0 10rpx;
		}

		.right-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-top: 20rpx;
			font-weight: normal;

			.switch-box {
				transform: scale(0.7);

			}
		}
	}

	.text-box {
		padding: 0 32rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.watch-sign-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx 0;
		position: relative;

		.line-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 74rpx;
			border-radius: 12rpx;
			position: relative;

			image {
				width: 49rpx;
			}

			.white-space {
				width: 49rpx;
				height: 49rpx;
			}

			text {
				text-align: center;
				color: #949494;
			}

			.top-img {
				position: absolute;
				top: -22rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 96rpx;
			}

			.margin-top-set {
				margin-top: 48rpx;
			}

			.mark-article {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 6rpx;
				width: 6rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
				border: 1px solid #EBEBEB;
				margin: 24rpx 0 12rpx;
				bottom: 34rpx;

				&.active {
					background: #D283FF;
					border: 1px solid #7BB1FD;
				}
			}
		}

		.process-box {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 48rpx;
			height: 4rpx;
			background: #EBEBEB;
			z-index: -1;
		}

		.process-box-back {
			position: absolute;
			left: 32rpx;
			bottom: 48rpx;
			height: 4rpx;
			background: linear-gradient(340deg, #D283FF 0%, #7BB1FD 100%);
			z-index: 0;
		}
	}
}

.tower-swiper .tower-item {
	transform: scale(calc(0.5 + var(--index) / 10));
	margin-left: calc(var(--left) * 100upx - 150upx);
	z-index: var(--index);
}

.tower-item.none {
	opacity: 0.6 !important;
}

.tower-swiper .tower-item .swiper-item {
	border-radius: 13rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;

	image {
		width: 345rpx;
		width: 242rpx;
		border-radius: 13rpx;
	}
}

.tower-swiper {
	width: 100%;
	height: 345rpx;
}

.margin-top-sets {
	margin-top: 56rpx;
}
</style>
